<template>
  <div class="app-container">
    <!--    顶部工具栏-->
    <div class="" style="margin-bottom: 10px;width: 100%;height:40px;">

      <span style="float:left;font-family: 'Arial Black';font-size: 25px;line-height: 40px;display: block">平台：</span>
      <el-radio-group style="float: left;" v-model="radio1" @change="changePlatform">
        <el-radio-button v-for="(pt,index) in PT_TYPE" :label="pt.id">{{pt.display_name}}</el-radio-button>
      </el-radio-group>
      <el-button type="success" style="margin-left: 20px" icon="el-icon-plus" @click="handleCreate">新增</el-button>
    </div>

    <!--数据展示列表-->
    <el-table
      :data="list"
      border
      fit
      ref="dragTable"
      row-key="id"
      style="width: 100%"

    >

      <!--      <el-table-column type="selection" min-width="2%"></el-table-column>-->

      <el-table-column
        label="ID"
        min-width="2%"
        align="center">
        <template slot-scope="scope">
<!--          <span style="margin-left: 0px">{{ scope.$index+1}}</span>-->
          <span style="margin-left: 0px">{{ scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动ID"
        min-width="2%"
        align="center">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.actid}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="名称"
        min-width="4%"
        align="center">
        <template slot-scope="scope">
          <!--          <span style="margin-left: 0px">{{ scope.row.stime }}</span>-->
          <!--          <span style="margin-left: 0px">{{ scope.row.playtime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
          <span style="margin-left: 0px">{{ scope.row.name}}</span>

        </template>
      </el-table-column>
      <el-table-column
        label="code name"
        min-width="4%"
        align="center">
        <template slot-scope="scope">
          <!--          <span style="margin-left: 0px">{{ scope.row.stime }}</span>-->
          <!--          <span style="margin-left: 0px">{{ scope.row.playtime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
          <span style="margin-left: 0px">{{ scope.row.codename}}</span>

        </template>
      </el-table-column>
      <el-table-column
        label="图片"
        min-width="10%"
        align="center">
        <template slot-scope="scope">
          <el-popover placement="right" title="" trigger="hover">
            <img :src="scope.row.url"/>

            <img slot="reference" :src="scope.row.url" :alt="scope.row.url"
                 class="img_preview">

            <!--            <div >-->
            <img slot="reference" v-if="scope.row.tempUrl.length>0" :src="scope.row.tempUrl" :alt="scope.row.tempUrl"
                 class="img_preview" style=" border: 2px dashed #bfcbd9">
            <!--              <span><i classmgt="el-icon-delete" @click="" /></span>-->
            <!--            </div>-->

          </el-popover>
          <el-upload
            action=#
            :on-change="(file,fileList)=>{return handleChange(file,fileList,scope.row)}"
            :on-preview="handlePreview"
            :before-upload="handleBeforeUpload"
            :auto-upload=false
            :show-file-list="false"
            :disabled="scope.row.tempUrl.length>0"
          >

            <el-button size="mini" type="primary" icon="el-icon-plus" slot="trigger" circle></el-button>
            <el-button v-show="scope.row.tempUrl.length>0" lot="reference" size="mini" icon="el-icon-delete"
                       type="danger" @click="handleDelete(scope.$index, scope.row)" circle></el-button>
            <!--            <div slot="tip" classmgt="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload>
        </template>


      </el-table-column>
      <el-table-column
        label="修改时间"
        min-width="4%"
        align="center">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.modifytime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作人员"
        min-width="2%"
        align="center">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.auther }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center" width="230" class-name="small-padding fixed-width"
        min-width="10%">
        <template slot-scope="scope">

          <el-button-group>
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button size="mini" type="primary" @click="">保存
            </el-button>

            <el-popconfirm
              placement="top"
              v-model="scope.row.visible"
              icon="el-icon-info"
              iconColor="red"
              title="确定要删除这条数据吗？"
            >
              <!--            <p>确定要删除这条数据吗？</p>-->
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" size="mini" type="danger">删除 </el-button>

            </el-popconfirm>
          </el-button-group>
        </template>
      </el-table-column>


    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="templist" label-position="left" label-width="100px"
               style="width: 400px; margin-left:50px;">
        <el-form-item label="活动ID" prop="actid">
          <el-input v-model="templist.actid"/>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="templist.name"/>
        </el-form-item>
        <el-form-item label="code name" prop="codename">
          <el-input v-model="templist.codename"/>
        </el-form-item>

        <!--        <el-form-item label="Remark">-->
        <!--          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea"-->
        <!--                    placeholder="Please input"/>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?diaCreateData():diaUpdateData()">
          确定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getList
  } from '@/api/act_dati'
  import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
  import { isInteger, isPassword } from '@/utils/validate'
  import { parseTime } from '@/utils'
  import noImg from '@/assets/cms_act/img.png'

  const PT_TYPE = [
    { id: 0, name: 'yd', display_name: '移动' },
    { id: 1, name: 'dx', display_name: '电信' },
    { id: 2, name: 'lt', display_name: '联通' }
  ]
  export default {
    data() {
      return {

        //---系统变量----

        PT_TYPE,//平台分类
        radio1: '0',
        platformKey: 0,//平台id
        textMap: [
          'create',
          'edit'
        ],
        dialogStatus: 0,
        dialogFormVisible: false,

        // 这是个网络
        // https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943
        imgFile: {
          homebg: {
            url: 'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
            name: ''
          },
          gamebg: {
            url: 'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
            name: ''
          },
          diaSucc: {
            url: '',
            name: ''
          },
          diaFail: {
            url: '',
            name: ''
          },
          diaTimeOut: {
            url: '',
            name: ''
          },
          diaTel: {
            url: '',
            name: ''
          }

        },
        list: '',
        templist: {
          actid: '1001',
          name: '测试',
          codename: 'homebg',
          modifytime: '2020-10-14 09:52:23',
          visible: false,
          url: 'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
          auther: 'cxy',
          tempUrl: ''
        },
        templistTape: {
          id:undefined,
          actid: '',
          name: '',
          codename: '',
          modifytime: '',
          visible: false,
          url: noImg,
          auther: 'admin',
          tempUrl: ''
        },
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        form: {
          // code: '',
          // region: '',
          // date1: '',
          // date2: '',
          // open: true,
          // type: [],
          platform: '1'
          // desc: ''
        },

        rules: {
          actid: [{ required: true, message: '必须是数字', trigger: 'blur' }, { validator: isInteger, trigger: 'blur' }],
          codename: [{ required: true, message: '字母/数字/下划线且非数字开头', trigger: 'blur' }, {
            validator: isPassword,
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.list = new Array()
      this.list.push(this.templist)
      // this.list.push(this.templist)
      // console.log('cest:' + this.list)

      // fetchList("").then(response=>{
      //   this.list = response.data
      // })

    },
    computed: {
      imgUrl() {
        return this.imgFile.tempUrl
      }
    },
    methods: {

      changePlatform(label) {
        this.platformKey = label
      },

      handleUpdate(file) {

      },
      handleRemove(file) {
        // console.log(file.url)
        // console.log(JSON.stringify(file))
        // file = ''
        // this.$emit('input', '')
        // this.disabled = true
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },

      handleDownload(file) {
        console.log('下载功能暂未开放')
      },
      handleDelete(index, row) {
        this.$notify({
          title: 'Success',
          message: 'Delete Successfully',
          type: 'success',
          duration: 2000
        })
        this.list.splice(index, 1)

      },

      handleChange(file, fileList, row) {
        // console.log(JSON.stringify(row))
        // console.log(JSON.stringify(file))

        row.tempUrl = URL.createObjectURL(file.raw)
        // row.url = URL.createObjectURL(file.raw);

      },

      handlePreview(file) {

      },
      handleBeforeUpload(file) {
        // console.log(JSON.stringify(file))
      },
      /**
       *
       * 新增数据
       */
      handleCreate() {
        this.dialogStatus = 'create'
        this.dialogFormVisible = true

        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
        this.templist = Object.assign({}, this.templistTape)

      },
      /**
       *
       * 编辑数据
       */
      handleEdit(row) {
        this.dialogStatus = 'edit'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
        // this.templist = Object.assign({}, row)
        this.templist = row
      },

      resetTemp() {
        // this.temp = this.tempVideoTape
        this.templist = Object.assign({}, this.templistTape)
        // console.log("resetTemp==="+JSON.stringify(this.tempVideoTape))
      },

      diaCreateData() {
        this.dialogFormVisible = false
        this.$refs['dataForm'].validate((valid) => {
          this.templist.modifytime = parseTime(new Date())
          // this.templist.id = parseInt(Math.random() * 100) + 1024 // mock a id

          // this.templist.url = this.noImg
          console.log(JSON.stringify(this.templist))
          this.list.push(this.templist)
        })

      },
      diaUpdateData() {
        this.dialogFormVisible = false
        // row = Object.assign({}, this.templist)
        // const index = this.list.findIndex(v => v.id === this.templist.id)
        // this.list[index] = this.templist
        console.log(JSON.stringify(this.templist))

      }
    }
  }
</script>

<style scoped>
  el-table-column {
    max-height: 10%;
  }

  .line {
    text-align: center
  }

  .upload-demo {
    display: inline;
  }

  .img_preview {
    /*max-height: 50px;max-width: 130px;*/
    max-height: 10%;
    max-width: 20%;
    margin-left: 10px;
    /*background-color: #42b983;*/
  }

  .img_temp_preview {
    width: 50px;
    height: 50px;
    /*float: left;*/

    /*max-height: 15%;*/
    /*max-width: 30%;*/
    /*position: relative;*/
    border: 1px dashed #d9d9d9;
    /*display: block;*/
  }
</style>

